<template>
   <h3>销毁</h3>
</template>

<script>
export default {
    data(){
        return {
        }
    },
    beforeCreate(){
        console.log('beforeCreate')
    },
    created(){
        console.log('created')
        // Vue实例
        // 定时器，挂载到this上，fn也同理~~~
        this.timerId = setInterval(() => {
            console.log('hello gui')
        }, 1000)
        // 虽然组件销毁了，但是这个全局的事件监听还在~~~
        this.fn = function(){
            console.log('滚滚滚~~')
        }
        // 移除事件监听 window.removeEventListener('mousemove', 关不掉)
        // 以后Vue组件中如果写了全局监听，定时器   scroll / resize(echarts)
        window.addEventListener('mousemove', this.fn)
    },
    beforeMount(){
        console.log('beforeMount')
    },
    mounted(){
        console.log('mounted')
    },
    beforeUpdate(){
        console.log('beforeUpdate')
    },
    updated(){
        console.log('updated')
    },
    // 组件销毁前 - 组件实例依然还保有全部的功能。
    // ===> 全局的定时器，不会自动销毁，需要手动关闭~~~

    // ==> 我们一般在组件销毁前 删除关闭一些全局的监听或者说定时器~~~
    beforeDestroy(){
        // 我喜欢在这里销毁
        clearInterval(this.timerId)
        window.removeEventListener('mousemove', this.fn)
        console.log('beforeDestroy')
    },
    // 组件销毁后
    destroyed(){
        console.log('destroyed')
    }
}
</script>

<style>

</style>